<script setup lang="ts">
import { useBeforeOrderStore } from '@/store/beforeOrder'
import { useUserInfoStore } from '@/store/userInfo'
import { OrderType } from '@/types/enum'

const router = useRouter()
const beforeOrderStore = useBeforeOrderStore()

/* -------------------------------- 导航栏 START ------------------------------- */
// 是否显示状态栏背景
const isShowNavBg = ref(false)
// 监听页面滚动，更新状态栏背景可见性
onPageScroll((e) => {
  const toggle = useThrottleFn(() => isShowNavBg.value = e.scrollTop > 16, 100)
  toggle()
})
// 将状态栏背景可见性提供给状态栏组件
provide(isShowNavigationBarBackgroundKey, isShowNavBg)
/* --------------------------------- 导航栏 END -------------------------------- */

/**
 * @description 跳转至选择位置页面
 * @param type 选择上车点还是下车点的位置
 */
function handleChooseLocation(type: '上车点' | '下车点') {
  router.push({
    name: 'chooseLocation',
    params: {
      type,
      navigationDestination: 'back',
      initialValue: type === '上车点'
        ? beforeOrderStore.from?.name || ''
        : beforeOrderStore.to?.name || '',
    },
  })
}

const handleSubmit = useThrottleFn(() => {
  if (
    !beforeOrderStore.passengerMobile
    || !beforeOrderStore.pronounMobile
    || !beforeOrderStore.from
    || !beforeOrderStore.to
  ) {
    uni.showToast({ title: '请先填选所有必填选项目', icon: 'none' })
    return
  }
  router.push({
    name: 'call',
    params: {
      order_type: OrderType.代叫.toString(),
    },
  })
}, 1000)
</script>

<template>
  <image
    class="absolute left-0 top-0 h-615rpx h-615rpx w-750rpx w-screen"
    src="@/static/images/call_for_someone_bg.png"
  />
  <NavigationBar title="一键代叫" />
  <Spacer height="209" />
  <view class="mx-24rpx">
    <view class="text-36rpx font-bold leading-36rpx">
      欢迎使用代叫服务
    </view>
    <Spacer height="15" />
    <view class="flex items-center">
      <view class="flex items-center">
        <view class="mr-2rpx h-4rpx w-4rpx rounded-full bg-#333333" />
        <view class="text-22rpx text-#333333 font-medium leading-22rpx">
          父母外出
        </view>
      </view>
      <Spacer width="20" />
      <view class="flex items-center">
        <view class="mr-2rpx h-4rpx w-4rpx rounded-full bg-#333333" />
        <view class="text-22rpx text-#333333 font-medium leading-22rpx">
          朋友聚会
        </view>
      </view>
      <Spacer width="20" />
      <view class="flex items-center">
        <view class="mr-2rpx h-4rpx w-4rpx rounded-full bg-#333333" />
        <view class="text-22rpx text-#333333 font-medium leading-22rpx">
          商务招待
        </view>
      </view>
    </view>
  </view>
  <Spacer height="30" />
  <view class="relative z-10 mx-24rpx rounded-20rpx bg-white px-30rpx py-40rpx">
    <view class="text-34rpx text-#333333 font-bold leading-34rpx">
      乘车人信息
    </view>
    <Spacer height="30" />
    <input
      v-model="beforeOrderStore.passengerMobile"
      type="text"
      class="h-98rpx rounded-20rpx bg-#F3F3F3 px-30rpx text-34rpx text-#333333 font-bold leading-34rpx"
      placeholder="请输入乘车人手机号码"
      placeholder-class="text-34rpx leading-34rpx text-#333333 font-bold"
    >
    <Spacer height="33" />
    <input
      v-model="beforeOrderStore.passengerName"
      type="text"
      class="px-30rpx text-28rpx text-#333333 font-medium leading-28rpx"
      placeholder="请输入乘车人姓名（选填）"
      placeholder-class="text-28rpx leading-28rpx text-#999999 font-bold"
    >
    <Spacer height="33" />
    <view
      class="h-98rpx w-full flex items-center rounded-20rpx bg-#F3F3F3 px-18rpx"
      @tap="handleChooseLocation('上车点')"
    >
      <view class="mr-15rpx h-12rpx w-12rpx rounded-full bg-#3F8BF6" />
      <view class="text-30rpx text-#333333 font-bold leading-30rpx">
        您将从<text class="mx-12rpx text-#3F8BF6">
          {{ beforeOrderStore.from ? beforeOrderStore.from.name : '' }}
        </text>上车>
      </view>
    </view>
    <Spacer height="33" />
    <view
      class="h-98rpx w-full flex items-center rounded-20rpx bg-#F3F3F3 px-18rpx"
      @tap="handleChooseLocation('下车点')"
    >
      <view class="mr-15rpx h-12rpx w-12rpx rounded-full bg-#FA662F" />
      <view class="text-30rpx text-#333333 font-bold leading-30rpx">
        {{ beforeOrderStore.to ? beforeOrderStore.to.name : '输入您的目的地' }}
      </view>
    </view>
  </view>
  <Spacer height="30" />
  <view class="relative z-10 mx-24rpx rounded-20rpx bg-white px-30rpx py-40rpx">
    <view class="text-30rpx text-#333333 font-medium leading-30rpx">
      代叫人信息
    </view>
    <Spacer height="30" />
    <input
      v-model="beforeOrderStore.pronounMobile"
      type="text"
      class="h-98rpx rounded-20rpx bg-#F3F3F3 px-30rpx text-34rpx text-#333333 font-bold leading-34rpx"
      placeholder="请输入代叫人手机号码"
      placeholder-class="text-34rpx leading-34rpx text-#333333 font-bold"
    >
    <Spacer height="33" />
    <input
      v-model="beforeOrderStore.pronounName"
      type="text"
      class="px-30rpx text-28rpx text-#333333 font-medium leading-28rpx"
      placeholder="请输入代叫人姓名（选填）"
      placeholder-class="text-28rpx leading-28rpx text-#999999 font-bold"
    >
  </view>
  <Spacer height="30" />
  <view class="relative z-10 mx-24rpx rounded-20rpx bg-white px-30rpx py-40rpx">
    <view class="text-30rpx text-#333333 font-bold leading-30rpx">
      司机优先联系
    </view>
    <Spacer height="30" />
    <view class="flex items-center">
      <view
        class="w-306rpx flex items-center justify-between rounded-20rpx px-32rpx py-36rpx text-28rpx font-medium leading-28rpx"
        :style="{
          backgroundColor: beforeOrderStore.priorityContact === '1' ? '#FCF1E6' : '#F3F3F3',
          border: beforeOrderStore.priorityContact === '1' ? '1rpx solid #FA662F' : '1rpx solid rgba(0, 0, 0, 0)',
          color: beforeOrderStore.priorityContact === '1' ? '#FA662F' : '#999999',
        }"
        @tap="beforeOrderStore.priorityContact = '1'"
      >
        乘车人
        <image
          class="h-32rpx w-30rpx flex-shrink-0"
          src="@/static/images/person_with_car.png"
        />
      </view>
      <Spacer width="30" />
      <view
        class="w-306rpx flex items-center justify-between rounded-20rpx px-32rpx py-36rpx text-28rpx font-medium leading-28rpx"
        :style="{
          backgroundColor: beforeOrderStore.priorityContact === '2' ? '#FCF1E6' : '#F3F3F3',
          border: beforeOrderStore.priorityContact === '2' ? '1rpx solid #FA662F' : '1rpx solid rgba(0, 0, 0, 0)',
          color: beforeOrderStore.priorityContact === '2' ? '#FA662F' : '#999999',
        }"
        @tap="beforeOrderStore.priorityContact = '2'"
      >
        联系我
        <image
          class="h-32rpx w-30rpx flex-shrink-0"
          src="@/static/images/person.png"
        />
      </view>
    </view>
  </view>
  <Spacer height="240" />
  <view class="fixed bottom-30rpx z-50 x-center">
    <RGButton @tap="handleSubmit">
      确认
    </RGButton>
  </view>
</template>

<route lang="yaml">
name: 'callForSomeone'
style:
  navigationStyle: 'custom'
</route>
